<template>
	<view class="container">
		<!-- <view class="bg">
			<NavigationBar backgroundColor="rgba(0,0,0,0)" :showIcon="false">
				<template #left></template>
				<template></template>
				<template #right></template>
			</NavigationBar>
		</view> -->
		<!-- <view class="header">
			<view class="title">
				无人机考试题库
			</view>
		</view> -->
		<view class="type-box">
			<view class="left">
				<view class="droneType">
					{{droneType||'多旋翼无人机'}}
				</view>
				<view class="idType">
					{{idType||'视距内驾驶员'}}
				</view>
			</view>
			<view class="right" @tap="goSelect">
				<view class="">
					切换
				</view>
				<u-icon name="arrow-right" color="#2764F2"></u-icon>
			</view>
		</view>
		<view class="section">
			<view class="box" @tap="toPractice">
				<view class="left">
					<view class="name">
						顺序练习
					</view>
					<view class="tips">
						{{currentIndex+1}}/{{total}}题
					</view>
					<view class="btn1">
						去练习
					</view>
				</view>
				<image src="https://q-api.lanbeiduo.com/api/file/download/hZWM72iR6N_做练习.png" mode="" class="icon">
				</image>
			</view>
			<view class="box" @tap="toExamination">
				<view class="left">
					<view class="name">
						模拟考试
					</view>
					<view class="tips">
						平均分: {{average}}
					</view>
					<view class="btn2">
						去考试
					</view>
				</view>
				<image src="https://q-api.lanbeiduo.com/api/file/download/hWyWZ14dkl_考试.png" mode="" class="icon">
				</image>
			</view>
		</view>
		<view class="cates">
            <view class="cate" @tap="toExamLog">
				<image src="https://q-api.lanbeiduo.com/api/file/download/UA9molZ372_f712be31-5dd8-4712-b25e-cf67c593b944.png" mode="" class="icon">
				</image>
				<view class="">
					每日一练
				</view>
			</view>
			<view class="cate" @tap="toExamLog">
				<image src="https://q-api.lanbeiduo.com/api/file/download/7c1Myz1tRr_564163a3-ae8a-47cc-afab-16697bc0eef6.png" mode="" class="icon">
				</image>
				<view class="">
					章节练习
				</view>
			</view>
			<view class="cate" @tap="toExamLog">
				<image src="https://q-api.lanbeiduo.com/api/file/download/8gxzex3nh3_efeb0ed3-35ee-47fd-8c84-42e92882cd72.png" mode="" class="icon">
				</image>
				<view class="">
					考试记录
				</view>
			</view>
			<view class="cate" @tap="toMyErrors">
				<image src="https://q-api.lanbeiduo.com/api/file/download/ql6g9IWbgy_64d98087-8d6a-4ee8-a748-245be2891a60.png" mode="" class="icon">
				</image>
				<view class="">
				    我的错题
				</view>
			</view>
			<view class="cate" @tap="toMyCollects">
				<image src="https://q-api.lanbeiduo.com/api/file/download/fqhDKBBKz9_86c30f22-8e77-49f5-a136-d9668f3fc9e6.png" mode="" class="icon">
				</image>
				<view class="">
					我的收藏
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		unref,
		toRaw,
		toRefs,
		nextTick
	} from 'vue'
	import {
		onInit,
		onLoad,
		onReady,
		onShow,
		onHide,
		onUnload,
		onResize,
		onShareAppMessage,
		onShareTimeline
	} from '@dcloudio/uni-app'
	import {
		$http,
		toLogin
	} from "@/common"
	import NavigationBar from "@/components/NavigationBar/NavigationBar.vue"
	const droneType = ref('')
	const idType = ref('')
	onShareAppMessage(()=>{
		return {
			title: '翼考一点通,聚焦于无人机驾考服务,助你轻松通过无人机驾考',
			path: "/pages/home/index", 
			imageUrl: "https://q-api.lanbeiduo.com/api/file/download/GSOTLpmSqq_9bd8cf79-37a9-4787-8fac-dfb673fde72c.png"
		}
	})
	onShareTimeline(()=>{
		return {
			title: '翼考一点通',
			imageUrl: "https://q-api.lanbeiduo.com/api/file/download/j7IykbZoSS_logo.png"
		}
	})
	onLoad(() => {
		if (uni.getStorageSync('userInfo')) {
			getData()
		} else {
			toLogin().then(result => {
				getData()
			})
		}
	})
	const average = ref(0)
	const total = ref(0)

	function getData() {
		$http.get("examLog").then(res => {
			if (res && res.length > 0) {
				average.value = (res.map(item => item.score).reduce((acc, cur) => acc + cur, 0) /
					res.length).toFixed(1)
			}
		})

		$http.get('questionBank', {
			pageNumber: 1,
			pageSize: 10
		}).then(res => {
			total.value = res.total
		})
	}
	const currentIndex = ref(0)
	onShow(() => {
		if (uni.getStorageSync('data0')) {
			currentIndex.value = JSON.parse(uni.getStorageSync('data0')).currentIndex
		}
		if (uni.getStorageSync('droneTypes')) {
			droneType.value = JSON.parse(uni.getStorageSync('droneTypes')).find(item => item.checked).name
		}
		if (uni.getStorageSync('idTypes')) {
			idType.value = JSON.parse(uni.getStorageSync('idTypes')).find(item => item.checked).name
		}
	})

	function toPractice() {
		uni.navigateTo({
			url: '/pages/home/practice'
		})
	}

	function toExamination() {
		uni.navigateTo({
			url: '/pages/home/examination'
		})
	}

	function goSelect() {
		uni.navigateTo({
			url: '/pages/home/select'
		})
	}

	function toExamLog() {
		uni.navigateTo({
			url: '/pages/home/examLog'
		})
	}
	function toMyErrors(){
		uni.navigateTo({
			url: '/pages/home/myErrors'
		})
	}
	function toMyCollects(){
		uni.navigateTo({
			url: '/pages/home/myCollects'
		})
	}
</script>

<style lang="scss" scoped>
	.bg {
		position: fixed;
		top: 0;
		width: 100%;
		height: 180px;
		overflow: hidden;
		z-index: 99;
	}

	.bg:after {
		width: 180%;
		height: 180px;
		position: absolute;
		left: -40%;
		top: 0;
		z-index: -1;
		content: "";
		border-radius: 0 0 50% 50%;
		background: #EFF9FE;
		backface-visibility: hidden;
		transform: translateZ(0);
	}

	.container {
		height: 100%;
		background: linear-gradient(to bottom, #EFF9FE, #F9F9F9);
		padding: 20rpx;

		.header {
			.title {
				font-size: 34rpx;
				font-weight: bold;
			}
		}

		.type-box {
			display: flex;
			justify-content: space-between;
			padding: 30rpx 20rpx;
			margin: 30rpx 0;
			background-color: #fff;
			border-radius: 20rpx;

			.left {
				display: flex;
				align-items: center;

				.droneType {
					font-size: 32rpx;
					font-weight: bold;
					margin-right: 10rpx;
				}

				.idType {
					color: #696969;
				}
			}

			.right {
				display: flex;
				align-items: center;

				view {
					color: #2764F2;
					margin-right: 6rpx;
					font-weight: bold;
				}
			}
		}

		.section {
			display: flex;
			justify-content: space-between;

			.box {
				display: flex;
				align-items: flex-end;
				justify-content: space-between;
				background-color: #fff;
				padding: 30rpx 20rpx;
				width: 48%;
				border-radius: 20rpx;

				.left {
					.name {
						font-size: 34rpx;
						font-weight: bold;
					}

					.tips {
						color: #696969;
						margin: 6rpx 0 60rpx 0;
					}

					.btn1 {
						width: 140rpx;
						height: 50rpx;
						border-radius: 25rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 28rpx;
						background-color: #D0DFFF;
					}

					.btn2 {
						font-size: 28rpx;
						width: 140rpx;
						height: 50rpx;
						border-radius: 25rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						background-color: #D6F2FE;
					}
				}

				.icon {
					width: 90rpx;
					height: 90rpx;
					margin-bottom: 10rpx;
				}
			}
		}

		.cates {
			display: flex;
			justify-content: space-between;
			background-color: #fff;
			padding: 20rpx 10rpx;
			margin: 20rpx 0;

			.cate {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 150rpx;

				.icon {
					width: 60rpx;
					height: 60rpx;
					margin-bottom: 10rpx;
				}
				view{
					font-size: 26rpx;
				}
			}
		}
	}
</style>